<template>
	<view class="settings-container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="page-title">设置</text>
		</view>

		<!-- 设置分组 -->
		<view class="settings-group" v-for="group in settingsGroups" :key="group.title">
			<text class="group-title">{{ group.title }}</text>
			<view class="group-content">
				<view v-for="item in group.items" :key="item.id" class="setting-item" @click="handleSettingClick(item)">
					<view class="item-left">
						<text class="item-icon">{{ item.icon }}</text>
						<text class="item-text">{{ item.name }}</text>
					</view>
					<view class="item-right">
						<text class="item-value" v-if="item.value">{{ item.value }}</text>
						<switch v-if="item.type === 'switch'" :checked="item.checked"
							@change="onSwitchChange(item, $event)" color="#007AFF" />
						<text class="item-arrow" v-else>></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section" v-if="isLogin">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>

		<!-- 版本信息 -->
		<view class="version-info">
			<text class="version-text">版本号 v1.0.0</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				settingsGroups: [{
						title: '账号设置',
						items: [{
								id: 1,
								name: '账号与安全',
								icon: '🔒',
								type: 'navigate',
								value: '已保护'
							},
							{
								id: 2,
								name: '隐私设置',
								icon: '👁️',
								type: 'navigate'
							},
							{
								id: 3,
								name: '通知设置',
								icon: '🔔',
								type: 'navigate'
							}
						]
					},
					{
						title: '通用设置',
						items: [{
								id: 4,
								name: '深色模式',
								icon: '🌙',
								type: 'switch',
								checked: false
							},
							{
								id: 5,
								name: '自动播放视频',
								icon: '▶️',
								type: 'switch',
								checked: true
							},
							{
								id: 6,
								name: 'WiFi下自动播放',
								icon: '📶',
								type: 'switch',
								checked: true
							},
							{
								id: 7,
								name: '清除缓存',
								icon: '🧹',
								type: 'action',
								value: '125.6 MB'
							},
							{
								id: 8,
								name: '语言设置',
								icon: '🌐',
								type: 'navigate',
								value: '简体中文'
							}
						]
					},
					{
						title: '支持与反馈',
						items: [{
								id: 9,
								name: '帮助中心',
								icon: '❓',
								type: 'navigate'
							},
							{
								id: 10,
								name: '意见反馈',
								icon: '💬',
								type: 'navigate'
							},
							{
								id: 11,
								name: '关于我们',
								icon: 'ℹ️',
								type: 'navigate'
							}
						]
					}
				]
			}
		},
		onShow() {
			this.checkLoginStatus()
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				this.isLogin = !!token
			},

			handleSettingClick(item) {
				switch (item.type) {
					case 'navigate':
						this.handleNavigate(item)
						break
					case 'action':
						this.handleAction(item)
						break
				}
			},

			handleNavigate(item) {
				// 根据不同的设置项跳转到对应页面
				const routes = {
					1: '/pages/settings/account-security',
					2: '/pages/settings/privacy',
					3: '/pages/settings/notifications',
					8: '/pages/settings/language',
					9: '/pages/settings/help',
					10: '/pages/settings/feedback',
					11: '/pages/settings/about'
				}

				const route = routes[item.id]
				if (route) {
					uni.navigateTo({
						url: route
					})
				} else {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
				}
			},

			handleAction(item) {
				switch (item.id) {
					case 7: // 清除缓存
						this.clearCache()
						break
				}
			},

			onSwitchChange(item, e) {
				item.checked = e.detail.value

				// 根据开关状态执行相应操作
				switch (item.id) {
					case 4: // 深色模式
						this.toggleDarkMode(item.checked)
						break
					case 5: // 自动播放
						this.toggleAutoPlay(item.checked)
						break
					case 6: // WiFi自动播放
						this.toggleWifiAutoPlay(item.checked)
						break
				}

				uni.showToast({
					title: item.checked ? '已开启' : '已关闭',
					icon: 'success'
				})
			},

			clearCache() {
				uni.showModal({
					title: '清除缓存',
					content: '确定要清除所有缓存数据吗？',
					success: (res) => {
						if (res.confirm) {
							// 模拟清除缓存
							setTimeout(() => {
								// 更新缓存大小显示
								const cacheItem = this.settingsGroups[1].items.find(item => item.id ===
									7)
								if (cacheItem) {
									cacheItem.value = '0 MB'
								}
								uni.showToast({
									title: '缓存已清除',
									icon: 'success'
								})
							}, 1000)
						}
					}
				})
			},

			toggleDarkMode(enabled) {
				// 切换深色模式
				if (enabled) {
					uni.setTabBarStyle({
						backgroundColor: '#1c1c1e',
						selectedColor: '#007AFF'
					})
				} else {
					uni.setTabBarStyle({
						backgroundColor: '#ffffff',
						selectedColor: '#007AFF'
					})
				}
			},

			toggleAutoPlay(enabled) {
				// 切换自动播放设置
				uni.setStorageSync('autoPlay', enabled)
			},

			toggleWifiAutoPlay(enabled) {
				// 切换WiFi自动播放设置
				uni.setStorageSync('wifiAutoPlay', enabled)
			},

			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录信息
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('favorites')
							uni.removeStorageSync('history')

							this.isLogin = false

							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})

							// 返回上一页
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.settings-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 40rpx;
	}

	.page-header {
		background: white;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.settings-group {
		margin: 20rpx;
	}

	.group-title {
		display: block;
		font-size: 26rpx;
		color: #999;
		margin-bottom: 16rpx;
		padding: 0 20rpx;
	}

	.group-content {
		background: white;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f8f8f8;
		transition: background-color 0.2s;
	}

	.setting-item:active {
		background-color: #f8f8f8;
	}

	.setting-item:last-child {
		border-bottom: none;
	}

	.item-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.item-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		width: 50rpx;
		text-align: center;
	}

	.item-text {
		font-size: 32rpx;
		color: #333;
	}

	.item-right {
		display: flex;
		align-items: center;
	}

	.item-value {
		font-size: 28rpx;
		color: #999;
		margin-right: 16rpx;
	}

	.item-arrow {
		font-size: 28rpx;
		color: #ccc;
	}

	/* 开关样式调整 */
	::v-deep .uni-switch-input {
		width: 80rpx !important;
		height: 44rpx !important;
	}

	::v-deep .uni-switch-input:before {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.logout-section {
		margin: 40rpx 20rpx 20rpx;
	}

	.logout-btn {
		background: #ff3b30;
		color: white;
		border: none;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.logout-btn::after {
		border: none;
	}

	.version-info {
		text-align: center;
		margin-top: 40rpx;
	}

	.version-text {
		font-size: 26rpx;
		color: #999;
	}
</style>